<template>
  <div class="container">
    <input id="document" type="file" @change="handleFileSelect" />
    <div class="row">
      <div class="span8">
        <div id="output" class="well"></div>
      </div>
      <div class="span4">
        <h3>总结内容：</h3>
        <div id="messages"></div>
      </div>
    </div>
  </div>
</template>

<script>
import mammoth from "mammoth";
export default {
  methods: {
    handleFileSelect(event) {
      this.readFileInputEventAsArrayBuffer(event, (arrayBuffer) => {
        mammoth
          .convertToHtml({ arrayBuffer: arrayBuffer })
          .then(this.displayResult)
          .done();
      });
    },

    displayResult(result) {
      document.getElementById("output").innerHTML = result.value;

      var messageHtml = result.messages
        .map((message) => {
          return (
            '<li class="' +
            message.type +
            '">' +
            this.escapeHtml(message.message) +
            "</li>"
          );
        })
        .join("");

      document.getElementById("messages").innerHTML =
        "<ul>" + messageHtml + "</ul>";
    },

    readFileInputEventAsArrayBuffer(event, callback) {
      var file = event.target.files[0];

      var reader = new FileReader();

      reader.onload = function (loadEvent) {
        var arrayBuffer = loadEvent.target.result;
        callback(arrayBuffer);
      };

      reader.readAsArrayBuffer(file);
    },

    escapeHtml(value) {
      return value
        .replace(/&/g, "&amp;")
        .replace(/"/g, "&quot;")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;");
    },
  },
};
</script>

<style lang="less" scoped>
.container{
  width: 100%;
  height: 100%;
  overflow: scroll;
}
</style>